<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" layout:decorator="layout/base">
<head>
    <title>我要发单</title>
</head>
<body>
<!-- Page header -->
<div class="page-header" layout:fragment="page-header">
    <div class="page-header-content">
        <div class="page-title">
            <h4><i class="icon-arrow-left52 position-left"></i> <span class="text-semibold"
                                                                      th:text="#{web.name}">管理系统</span> - 我要发单</h4>
        </div>
    </div>
</div>
<!-- /page header -->

<!-- Main content -->
<div class="content-wrapper" layout:fragment="content">
    <!-- Table -->
    <div class="panel panel-flat min-panel">
        <div class="panel-heading">
            <h5 class="panel-title text-primary"><i class="icon-list"/>我要发单</h5>
        </div>

        <div class="panel-body">
            <!-- Starting step -->
            <div class="steps-starting-step">
                <h6>基本信息</h6>
                <fieldset>
                    <form action="#" id="infoForm">
                        <fieldset class="form-horizontal select_cascade">
                            <div class="form-group">
                                <label class="control-label col-lg-1">标题:</label>

                                <div class="col-lg-8">
                                    <input name="title" type="text" placeholder="标题" class="form-control required"
                                           maxlength="50"/>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label col-lg-1">行业:</label>
                                <input name="id" type="text" style="display:none"/>

                                <div class="col-lg-8">
                                    <select class="select form-control" name="industry">
                                        <option th:each="major:${majors}"
                                                th:value="${major.value}"
                                                th:text="${major.name}"></option>
                                    </select>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label col-lg-1">风格:</label>

                                <div class="col-lg-8">
                                    <select class="select" name="style">
                                        <option th:each="style:${styles}"
                                                th:value="${style.value}"
                                                th:text="${style.name}"></option>
                                    </select>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label col-lg-1">面积:</label>

                                <div class="col-lg-8">
                                    <input name="size" type="number" placeholder="面积(平米)" class="form-control required"
                                           number="true" maxlength="20"/>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label col-lg-1">预算金额:</label>

                                <div class="col-lg-8">
                                    <input name="budget" type="text" placeholder="10-30万" class="form-control required"
                                           maxlength="20"
                                           data-inputmask-regex="^[0-9]{1,5}-[0-9]{1,5}万$"/>
                                    <!--data-inputmask="'mask': '9{1,5}-9{1,5}万'"-->
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label col-lg-1">QQ:</label>

                                <div class="col-lg-8">
                                    <input name="qq" type="text" placeholder="QQ" class="form-control required"
                                           number="true" maxlength="11"/>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label col-lg-1">微信:</label>
                                <div class="col-lg-8">
                                    <input name="weixin" type="text" placeholder="微信" class="form-control required"
                                           maxlength="11"/>
                                </div>
                            </div>

                            <div id="distpicker" class="form-group">
                                <label class="control-label col-lg-1">地区:</label>

                                <div class="col-lg-8">
                                    <select name="province"></select>
                                    <select name="city"></select>
                                    <select name="district"></select>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label col-lg-1">描述:</label>

                                <div class="col-lg-8">
                                <textarea name="description" rows="5" cols="5" class="form-control" maxlength="150"
                                          placeholder="备注描述"></textarea>
                                </div>
                            </div>
                        </fieldset>
                    </form>

                </fieldset>

                <h6>上传附件</h6>
                <fieldset>
                    <input id="requirementId" type="hidden"/>

                    <div class="col-lg-12">
                        <div class="file-uploader"><p>Your browser doesn't have Flash installed.</p></div>
                    </div>
                </fieldset>
            </div>
            <!-- /starting step -->
        </div>
    </div>
    <!-- /table -->
    <script type="text/javascript" th:src="@{/assets/js/plugins/forms/wizards/steps.min.js}"></script>
    <script type="text/javascript" th:src="@{/assets/js/plugins/forms/inputmask/jquery.inputmask.bundle.js}"></script>
    <script type="text/javascript" th:src="@{/assets/js/plugins/distpicker/distpicker.data.js}"></script>
    <script type="text/javascript" th:src="@{/assets/js/plugins/distpicker/distpicker.js}"></script>
    <script type="text/javascript" th:src="@{/assets/js/plugins/uploaders/plupload/plupload.full.min.js}"></script>
    <script type="text/javascript" th:src="@{/assets/js/plugins/uploaders/plupload/plupload.queue.min.js}"></script>
    <script type="text/javascript" th:src="@{/assets/js/plugins/uploaders/plupload/zh_CN.js}"></script>
    <script th:inline="javascript">
        var requirementId;

        $(".steps-starting-step").steps({
            headerTag: "h6",
            bodyTag: "fieldset",
            titleTemplate: '<span class="number">#index#</span> #title#',
            labels: {
                previous: '上一步',
                next: '下一步',
                finish: '完  成'
            },
            autoFocus: true,
            onFinished: function (event, currentIndex) {
                window.location.href = contextpath + "requirement/my";
            },
            onStepChanging: function (event, currentIndex, newIndex) {
                if (currentIndex != 0 || newIndex != 1) {
                    return true;
                }

                if (requirementId > 0) {
                    initFileUploader();
                    return true;
                }

                // 表单校验
                if ($("#infoForm").valid()) {
                    $.post(contextpath + "requirement/my/add", $("#infoForm").serialize(), function (data) {
                        requirementId = data;

                        initFileUploader();
                    });
                    return true;
                }
                return false;
            }
        });

        $(":input").inputmask();

        $('.select').select2({
            minimumResultsForSearch: Infinity
        });

        $("#distpicker").distpicker({
            placeholder: false,
            province: "广东省",
            city: "深圳市",
            district: "南山区"
        });

        // Setup all runtimes
        function initFileUploader() {
            $(".file-uploader").pluploadQueue({
                url: contextpath + 'upload/add/requirement/' + requirementId,
                chunk_size: 0,
                filters: {
                    max_file_size: '10MB',
//                    mime_types: [{title: "Image files", extensions: "jpg,gif,png,txt"},
//                        {title: "Zip files", extensions: "rar,zip"}],
                    prevent_duplicates: true
                },
                init: {
                    UploadComplete: function (up, files) {
                        console.log("UploadComplete");
                        console.log(files);
//                    $(".file-uploader").pluploadQueue(option);
                    },
                    FileUploaded: function (up, file, info) {
                        console.log("FileUploaded");
                        console.log(info);
                    }
                }
            });
        }
    </script>
</div>
<!-- /main content -->
</body>
</html>